<template>
  <div class="classify_wrap">
    <div class="box_main">
      <div class="nav_wrap">
        <div class="nav_title" v-for="(item, index) in navTitle" :key="index">
          <h2>{{ item.title }}</h2>
          <div class="nav_lable">
            <span
              :class="{ tab_active: indexs == num && index == tabnum }"
              @click="tab_menu(index, indexs)"
              v-for="(items, indexs) in item.contxt"
              :key="indexs"
              >{{ items.resource_title }}</span
            >
          </div>
        </div>
      </div>
      <div class="tab_body">
        <div class="div_main_wrap" v-for="(items, index) in 20" :key="index" @click="classifyDetlail(index)">
          <div class="card_wrap_top">
            <div class="img_wrap">
              <img
                src="https://cdn.guojiang.club/images/3898fb8ebf69fda349ad56e60f100ff3.jpg"
                alt=""
              />
            </div>
            <div class="txt_wrap">
              <span>标题</span>
              <p>
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
              </p>
            </div>
          </div>
          <div class="card_wrap_bottom">
            <span v-for="(item, index) in 2" :key="index">标签</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      tabnum: 1,
      navTitle: [
        {
          id: 1,
          title: "资源下载",
          contxt: [
            {
              ids: 1,
              resource_title: "html",
            },
            {
              ids: 2,
              resource_title: "css",
            },
            {
              ids: 3,
              resource_title: "javascriptvjavascript",
            },
          ],
        },
        {
          id: 1,
          title: "前端",
          contxt: [
            {
              ids: 1,
              resource_title: "html",
            },
            {
              ids: 2,
              resource_title: "css",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
          ],
        },
        {
          id: 1,
          title: "后端",
          contxt: [
            {
              ids: 1,
              resource_title: "html",
            },
            {
              ids: 2,
              resource_title: "css",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
          ],
        },
        {
          id: 1,
          title: "其他",
          contxt: [
            {
              ids: 1,
              resource_title: "html",
            },
            {
              ids: 2,
              resource_title: "css",
            },
            {
              ids: 3,
              resource_title: "javascript",
            },
          ],
        },
      ],
    };
  },
  methods: {
    tab_menu(index, indexs) {
      this.tabnum = index;
      this.num = indexs;
    },
    // 详情跳转
    classifyDetlail(index){
      if(index % 2 == 0){
        this.$router.push({
          name:"classifys_md",
          query:{
            id:index
          }
        })
      }else{
        this.$router.push({
          name:"classifys_pdf",
          query:{
            id:index
          }
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.classify_wrap {
  width: 100%;
  .box_main {
    margin: 0 auto;
    width: 1200px;
    min-height: 1000px;
    .nav_wrap {
      padding: 0 30px;
      width: 100%;
      min-height: 300px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: center;
      margin-bottom: 50px;
      .nav_title {
        margin-top: 35px;
        > h2 {
          color: #666;
        }
        .nav_lable {
          display: flex;
          flex-wrap: wrap;
          > span {
            margin: 10px 0;
            cursor: pointer;
            color: #999;
            font-weight: bold;
            padding: 5px 10px;
            margin-right: 10px;
            border-radius: 5px;
            box-sizing: border-box;
          }
        }
      }
    }
    .tab_body {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      > .div_main_wrap {
        transition: all 0.3s;
        margin: 20px 0;
        width: 29%;
        height: 130px;
        background: #fff;
        padding: 15px;
        box-sizing: border-box;
        box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.25);
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .card_wrap_top {
          display: flex;
          .txt_wrap {
            width: 250px;
            > span {
              font-weight: 600;
              font-size: 19px;
            }
            > p {
              margin: 5px 0;
              color: #979898;
              font-size: 13px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .img_wrap {
            margin-right: 20px;
            > img {
              border-radius: 3px;
              width: 40px;
              height: 40px;
            }
          }
        }
        .card_wrap_bottom {
          > span {
            background-color: #ff6a3e;
            border-radius: 4px;
            padding: 2px 5px;
            margin-right: 5px;
            color: rgb(253, 253, 253);
            font-size: 10px;
          }
        }
      }
      > .div_main_wrap:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 35px rgba(103, 132, 139, 0.15);
      }
    }
  }

  // (min-width: 1000px) and (max-width: 1120px)
  @media screen and (min-width: 1000px) and (max-width: 1120px) {
    .box_main {
      margin: 0 auto;
      width: 960px;
      min-height: 1000px;
      .nav_wrap {
        // background-color: aqua;
        width: 100%;
        min-height: 300px;
      }
      .tab_body {
        > .div_main_wrap {
          transition: all 0.3s;
          margin: 20px 0;
          width: 41%;
          height: 130px;
          background: #fff;
          padding: 15px;
          box-sizing: border-box;
          box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.25);
          cursor: pointer;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
  // (min-width: 1000px)
  @media screen and (max-width: 1000px) {
    .box_main {
      margin: 0 auto;
      width: 100%;
      min-height: 1000px;
      .nav_wrap {
      padding: 0 30px;
      width: 100%;
      min-height: 300px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: center;
      margin-bottom: 50px;
      .nav_title {
        box-sizing: border-box;
        margin-top: 35px;
        > h2 {
          font-size: 50px;
          color: #666;
        }
        .nav_lable {
          display: flex;
          flex-wrap: wrap;
          box-sizing: border-box!important;
          > span {
            box-sizing: border-box!important;
            margin: 10px 0;
            cursor: pointer;
            color: #999;
            font-weight: bold;
            padding: 10px 20px;
            margin-right: 5px;
            border-radius: 12px;
            font-size: 35px;
          }
        }
      }
    }
      .nav_wrap {
        width: 100%;
        min-height: 400px;
      }
      .tab_body {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        > .div_main_wrap {
          transition: all 0.3s;
          margin: 20px 0;
          width: 90%;
          height: 330px;
          background: #fff;
          padding: 35px;
          box-sizing: border-box;
          box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.25);
          cursor: pointer;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          .card_wrap_top {
            display: flex;
            .txt_wrap {
              width: 75%;
              > span {
                font-weight: 800;
                font-size: 60px;
              }
              > p {
                margin: 20px 0 45px 0;
                color: #979898;
                font-size: 32px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
            .img_wrap {
              margin-right: 50px;
              > img {
                border-radius: 3px;
                width: 100px;
                height: 100px;
              }
            }
          }
          .card_wrap_bottom {
            > span {
              background-color: #ff6a3e;
              border-radius: 5px;
              padding: 8px 20px;
              margin-right: 5px;
              color: rgb(253, 253, 253);
              font-size: 15px;
            }
          }
        }
        > .div_main_wrap:hover {
          transform: translateY(-6px);
          box-shadow: 0 25px 35px rgba(103, 132, 139, 0.15);
        }
      }
    }
  }
}
.tab_active {
  background: #ff6a3e !important;
  color: #fff !important;
  font-weight: bold;
}
</style>